<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../../css/public.css" />
</head>

<body class="bg">
	<div class="k-container">
		<h3 class="k-title"></h3>
		<div class="k-process-box">
			<ul class="process-item"></ul>
			<span class="k-tips">一共分5部分，每通过一部分，就获得一颗星。</span>
		</div>
		<div class="problem-box">
			<!-- <div class="question-box">
					<div class="k-t-box">
						<span class="k-q-title">请介绍一下汉语的定义。</span>
					</div>
					<textarea rows="" cols="" placeholder="模板模板模板模板模板模板模板模板模板模板"></textarea>
				</div>
				<div class="k-btn">
					<button type="button">暂时保存</button>
					<button type="button">第二部分</button>
				</div> -->
		</div>
	</div>
</body>

</html>
<script src="../../js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/public.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/dream-msg.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
	let items = $('.process-item');

	function stars(light = 1) {
		// 清空
		items.html('');
		for (var i = 0; i < 5; i++) {
			if (i < light) {
				let i = $('<div class="k-box"><i class="iconfont icon-queren k-size"></i></div>');
				items.append(i);
			} else {
				let li = $('<li></li>');
				items.append(li);
			}
		}
	}

	let titlelist = ['第一部分 基础知识',
		'第二部分 拼音和声调',
		'第三部分 HSK1，2，3级以下语法',
		'第四部分  HSK3，4级语法',
		'第五部分 HSK5，6级语法',
	];

	let problembox = $('.problem-box');
	// 教学知识1
	let firstlist = ['请介绍一下汉语的定义。',
		'请简单介绍一下"汉语"，"普通话"，"中文"，"华语"，"国语"等各种说法。',
		'拼音是什么时候确立的，意义，作用和你所发现的不足之处。',
		'你了解繁体字，简体字的历史，现状，以及使用地区吗？'
	];
	// 教学知识2	
	let secondlist = ['怎么样向学生说明 "zi, ci, si, zhi, chi, shi, ri" 的发音？。',
		'如何说明 "e" 的发音',
		'如何说明 "ü(yu)" 的发音',
		'请说一下"ian"和"iang"的发音区别',
		'请说出6对送气音和不送气音，并解释区别',
		'怎样给学生讲解声调（四声及轻声）？',
		'说明第三声的变调',
		'说明第三声的变调'
	];
	//教学知识3
	let thirdlist = ['“的”、“地”、“得”的区别和用法',
		'说明存现句的”有”，”在”，”是”',
		'举例说明能愿动词”能”，”会”，”可以”的用法',
		'举例说明”是……的”的句型',
		'"不"和"没"用在动词前的区别',
		'“高高兴兴”与  “高兴高兴”有什么不同？',
		'说明”的”用法，什么时候用，什么时候省略',
		'"要"作为助动词的时候，有哪些用法?',
		'"有点儿"和"一点儿"的区别',
		'“想” 和“要”都可以表示个人的愿望，打算。它们有什么不同。',
		'解释一下"我来介紹一下"中的"来"的意思',
		'助动词"会"的用法',
		'"二"和"两"的区别',
		'说明一下"被"字句',
	];

	// 教学知识4
	let fourthlist = [
		'总结”了”的用法',
		'说明”在”的主要4种用法',
		'分析”又”，”再”，”还”的区别',
		'举例说明”给”，”对”，”向”，”往”的用法',
		'举例说明”把”字句存在意义和结构',
		'什么情况下不能使用动词重叠？',
		'"从"和"离"的区别',
		'“都不”与“不都"的不同',
		'动词前"就"和"才"的对比',
		'举例说明什么是离合词，以及用法',
		'"我们"和"咱们"的区别',
		'"因此"和"于是"的不同',
	];

	//教学知识5

	let fifthlist = [
		'差点儿迟到和差点没迟到的意思一样吗？',
		'表示转折的“但是”、“只是”与“不过”的用法区别',
		'“怎么”有时也有问原因的意思，这时它和“为什么”有什么不同？',
		'“为了“和“为“的用法区别',
		'举例说明"忽然""突然"的用法区别',
		'举例说明关联词”即使”，”尽管”，”不管/无论”的用法 , 区别，意思，以及后半部分如何接续',
		'"没听懂"和"听不懂"的区別',
		'请解释“以后”与“后来”的用法区别',
		'作为结果补语的“过来”和“过去”的用法区别',
		'“关于”与“至于”在用法上的区别',
		'"一定"和"必须"的区别',
	]

	let titletext = $('.k-title');

	function productexecise(title, lightstar, arr, now) {

		// 清空内容，避免重复
		problembox.html('');

		// 设置标题
		titletext.html(titlelist[title]);

		// 星星数量显示
		stars(lightstar);

		arr.forEach((item, index) => {
			let templatearea = `<div class="question-box">
									<div class="k-t-box">
										<span class="k-q-title">${item}</span>
									</div>
									<textarea rows="" cols="" placeholder=""></textarea>
								</div>`
			problembox.append(templatearea);
		})

		// 设置按钮
		let groupbtn = $('<div class="k-btn"></div>');
		let btnfirst = $('<button type="button">暂时保存</button>');
		let btnsecond = $('<button type="button"></button>');


		// function  submitInfoace
		// 事件选择
		switch (now) {
			case 1:
				btnfirst.click(function () {


					Dreamer.info('保存成功', 2000);

					$('textarea').each(function () {
						console.log($(this).val());
					})
				})
				btnsecond.html('第二部分');
				btnsecond.click(function () {
					productexecise(1, 2, secondlist, 2);
				})
				break;
			case 2:
				btnfirst.click(function () {
					Dreamer.info('保存成功', 2000);
				})
				btnsecond.html('第三部分');
				btnsecond.click(function () {
					Dreamer.info('保存成功', 2000);
					productexecise(3, 3, thirdlist, 3);
				})
				break;
			case 3:
				btnfirst.click(function () {
					Dreamer.info('保存成功', 2000);
				})
				btnsecond.html('第四部分');
				btnsecond.click(function () {
					Dreamer.info('保存成功', 2000);
					productexecise(4, 4, fourthlist, 4);
				})
				break;
			case 4:
				btnfirst.click(function () {
					Dreamer.info('保存成功', 2000);
				})
				btnsecond.html('第五部分');
				btnsecond.click(function () {
					Dreamer.info('保存成功', 2000);
					productexecise(5, 5, fifthlist, 5);
				})
				break;
			case 5:
				btnfirst.click(function () {
					Dreamer.info('保存成功', 2000);
				})
				btnsecond.html('提交');
				btnsecond.click(function () {
					Dreamer.info('保存成功', 2000);
				})
				break;
		}
		groupbtn.append(btnfirst);
		groupbtn.append(btnsecond);
		problembox.append(groupbtn);

	}
	productexecise(0, 1, firstlist, 1);
	// $("textarea").contextmenu(function () {

	// 	alert('禁止黏贴')
	// 	return false

	// })

	// $("textarea").onpaste = function () {

	// 	return false
	// }

	// document.onkeydown = function (e) {
	// 	console.log(e.keyCode)
	// 	if (event.ctrlKey && window.event.keyCode == 67) {
	// 		return false;
	// 	}
	// 	if (event.ctrlKey && window.event.keyCode == 86) {
	// 		return false;
	// 	}
	// }
	// document.body.oncopy = function () {
	// 	return false;
	// }
	// document.onpaste = function () {

	// 	return false
	// }

	// $('textarea').oncopy(function () {

	// 	return false
	// })

	// $('textarea').onpaste(function () {

	// 	return false
	// })


	async function apirequest() {
		function run() {
			let ArraysList = [];
			return new Promise(async (resolve, reject) => {
				firstlist.forEach(async (item, index) => {
					let params = {
						"subjectlist": [{ "teacherid": parseInt(localStorage.getItem('user_Id')), "subject": item, "answer": '1', "parentid": 1, "createtime": getDate(), "state": 1 }]
					}
					let res = await ajax('knowledge_education_add', params, 'post');
					console.log(res)
					ArraysList.push(res.data[0].id)
					if (index === firstlist.length - 1) {
						resolve(ArraysList)
					}
				})

			})

		}

		run().then((res) => {
			console.log(res)
		})



	}
	apirequest()

	// document.oncontextmenu = function () {


	// 	Dreamer.warning('禁止粘贴', 2000)

	// 	return false
	// }


	// document.onkeydown = function (e) {


	// 	if (e.keyCode == 86 && e.ctrlKey) {

	// 		Dreamer.warning('禁止粘贴', 2000)

	// 		return false
	// 	}

	// 	if (window.event.keyCode == 67 && event.ctrlKey) {

	// 		Dreamer.warning('禁止复制', 2000)

	// 		return false
	// 	}
	// }


</script>
<style type="text/css">
	.k-container {
		margin-top: 42px;
		width: 770px;
		height: auto;
		border-radius: 6px;
		background-color: #fff;
		box-sizing: border-box;
		padding: 20px 45px;
		display: flex;
		flex-flow: column wrap;
		justify-content: center;
		align-items: center;
	}

	.k-title {
		color: #3C3C3C;
		font-size: 18px;
		font-weight: bold;
	}

	.k-size {
		font-size: 10px;
		color: #4580FE;
	}

	.k-process-box {
		padding-top: 32px;
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.k-process-box ul {
		width: 240px;
		height: 3px;
		background-color: #EDEFF0;
		border-radius: 6px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.k-process-box li {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: #D5D5D5;
		position: relative;
	}

	.k-box {
		position: relative;
	}

	.k-process-box .k-box::before {
		content: '';
		background-image: url(../../static/knowledge/star.png);
		width: 22px;
		height: 22px;
		position: absolute;
		left: -6px;
		bottom: 18px;
	}

	.problem-box {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

	.question-box {
		width: 100%;
		height: auto;
		padding-bottom: 18px;
		position: relative;
		bottom: 10px;
	}

	.k-t-box {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 18px;
	}

	.k-q-title {
		display: block;
		color: #444444;
		font-size: 14px;
		font-weight: bold;
	}

	.k-tips {
		color: #818181;
		transform: scale(0.90);
		font-size: 10px;
		position: relative;
		top: 10px;
	}

	.question-box textarea {
		width: 100%;
		min-height: 74px;
		resize: none;
		box-sizing: border-box;
		border: 1px solid #C3C3C3;
		border-radius: 6px;
		padding: 8px;
		outline: none;
	}

	.question-box textarea:hover {
		border-color: #5686E9;
		cursor: pointer;
	}

	input::-webkit-input-placeholder,
	textarea::-webkit-input-placeholder {
		color: #818181;
		font-size: 14px;
		font-weight: bold;
	}

	.k-btn {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.k-btn button {
		width: 100px;
		height: 32px;
		font-size: 14px;
		border-radius: 6px;
		outline: none;
	}

	.k-btn button:first-of-type {
		background-color: #FFFFFF;
		color: #818181;
		border: 1px solid #D5D5D5;
	}

	.k-btn button:last-of-type {
		margin-left: 48px;
		background-color: #5686E9;
		color: #fff;
	}
</style>